<template>
  <div class="person">
    <h2>Name:{{name}}</h2>
    <h2>Age:{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>

</template>

<script lang="ts" setup name="Person">  //生效需要引入外部插件import VueSetupExtend  from 'vite-plugin-vue-setup-extend'
/**
 * @author
 * 基本类型响应式数据必须用ref
 * 若需要永固一个响应式对象层级不深ref，reactive都可以
 * 若需要一个响应式对哦哦行,并且层级较深推荐实用reactive
 */
import {ref,reactive,toRefs,toRef} from "vue";
let person=reactive({
  name:'罗佳维',
  age:18
})
let nl=toRef(person,'age')//单个响应式
console.log(nl)
let {name,age}=toRefs(person)//把reactive定义的整个对象转换为响应式对象
function changeAge(){
  name.value='luojiawei'
}
function changeName(){
  age.value+=1
}

</script>
<style>
button{
  margin: 5px;
}
body{
  background-color: pink;
}
li{
  font-size: 30px;
}
</style>